<template>
  <div class="bind_container mod">
    <nut-tabs v-model="tab_id" v-if="pageLoaded" style="height: 100%;">
      <nut-tab-pane :title="t('menu_normal_modify_passwd')" pane-key="1">
        <div class="bind_box">
          <routine></routine>
        </div>
      </nut-tab-pane>
      <nut-tab-pane :title="t('menu_phone_modify_passwd')" pane-key="2">
        <div class="bind_box">
          <mobileModify v-if="info.mobile"></mobileModify>
          <div v-else class="bind"
            style="height: 100%;display: flex; flex-direction: column;justify-content: space-between;">
            {{ t("home_page_unbind_phone_info") }}

            <nut-button class="submit" @click="router.push('/securitySettings/bindPhone')">{{
              t("btn_label_bindNow") }}</nut-button>
          </div>
        </div>
      </nut-tab-pane>
      <nut-tab-pane :title="t('menu_email_modify_passwd')" pane-key="3">
        <div class="bind_box">
          <emailModify v-if="info.email" style="height: 100%;"></emailModify>
          <div v-else class="bind"
            style="height: 100%;display: flex; flex-direction: column;justify-content: space-between;">
            {{ t("home_page_unbind_phone_info") }}

            <nut-button class="submit " @click="router.push('/securitySettings/bindEmail')">{{
              t("btn_label_bindNow") }}</nut-button>
          </div>
        </div>
      </nut-tab-pane>
    </nut-tabs>
    <Toast v-model:visible="securityshowToast">{{ toast_value }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from "vue";
import routine from "./components/routine.vue";
import emailModify from "./components/emailModify.vue";
import mobileModify from "./components/mobileModify.vue";
import commonHooks, { securityshowToast, toast_value } from "../commonHooks";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const Toast = defineAsyncComponent(() => import("@/components/Toast.vue"));

const tab_id = ref(1);
const router = useRouter();
const { info } = commonHooks();
const { t } = useI18n();

const pageLoaded = ref(false)
onMounted(() => {
  setTimeout(() => {
    pageLoaded.value = true
  }, 300)
})
</script>

<style lang="scss" scoped>
@import url(../style.scss);

.bind_box {
  // margin: 0 20px;
  height: 100%;
  // overflow: hidden;
}
</style>
